<template>
	<view class="pages">
		<view class="info padding">
			<view class="info-line font-14 padding-top-xs padding-bottom-xs">
				<view class="info-line-left">
					车牌：<text class="text-grey3">{{ data.licensePlate }}</text>
				</view>
				<uni-tag :text="data.useCarStatusDes" size="small" :type="statusType[data.useCarStatus]" v-if="data.delFlag == 0"></uni-tag>
				<uni-tag text="已取消" size="small" type="error" v-if="data.delFlag == 2"></uni-tag>
			</view>
			<view class="info-line font-14 padding-top-xs padding-bottom-xs">
				<view class="info-line-left">
					司机：<text class="text-grey3">{{ data.driverName }}</text> <text class="margin-left-sm text-blue1" @click="makePhoneCall(data.driverPhone)">{{ data.driverPhone }}</text>
				</view>
			</view>
			<view class="info-line font-14 padding-top-xs padding-bottom-xs">
				<view class="info-line-left">
					路线：<text class="text-grey3">{{ address }}</text>
				</view>
			</view>
			<view class="info-line font-14 padding-top-xs padding-bottom-xs">
				<view class="info-line-left">
					时间：<text class="text-grey3">{{ data.startTime }} - {{ data.endTime }}</text>
				</view>
			</view>
			<view class="info-line font-14 padding-top-xs">
				<view class="info-line-left flex5">
					已占座：<text class="text-grey3">{{ data.reserveSeatNum }}</text>
				</view>
				<view class="info-line-left flex5">
					未占座：<text class="text-grey3">{{ data.remainderSeatNum }}</text>
				</view>
			</view>
		</view>
		<view class="users margin-top-sm" v-if="(roles.includes('common') && applyCarList.length >0) || !roles.includes('common')">
			<view class="title font-14 font-weight-700 padding-left-sm padding-right-sm padding-top-sm padding-bottom-sm">
				约车人员
			</view>
			<view class="con padding">
				<view class="user margin-bottom-sm" v-for="(item , index) in applyCarList" :key="index">
					<view class="user-line padding-top-xs padding-bottom-xs">
						<view class="user-line-text flex5">
							<view class="desc">申请部门：</view>
							<view class="text-grey3">{{ item.deptName }}</view>
						</view>
						<uni-tag :text="item.taskStatusDes" size="small" :type="taskStatus[item.taskStatus]"></uni-tag>
					</view>
					<view class="user-line padding-top-xs padding-bottom-xs">
						<view class="user-line-text flex5">
							<view class="desc">申请人：</view>
							<view class="text-grey3">{{ item.nickName || item.userName }}</view>
							<view class="text-blue1 margin-left-sm" @click="makePhoneCall(item.userPhone)">{{ item.userPhone }}</view>
						</view>
					</view>
					<view class="user-line padding-top-xs padding-bottom-xs">
						<view class="user-line-text">
							<view class="desc">地址：</view>
							<view class="text-grey3">{{ item.address.join(' - ') }}</view>
						</view>
					</view>
					<view class="user-line padding-top-xs padding-bottom-xs">
						<view class="user-line-text flex5">
							<view class="desc">占座数量：</view>
							<view class="text-grey3">{{ item.occupaSeatNum }}</view>
						</view>
						<view class="user-line-text flex5">
							<view class="desc">是否有货物：</view>
							<view class="text-grey3">{{ item.isGoods == '0' ? '没有' : '有' }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="addBtn" v-if="data.useCarStatus == 1 && roles.includes('driver')">
			<button type="primary" @click="add()" style="width: 500upx;border-radius: 60upx;">结束行程</button>
		</view>
	</view>
</template>

<script>
	import { makePhoneCall } from '@/utils/common'
	import { getInfo } from '@/api/system/stroke'
	import storage from '@/utils/storage'
	export default{
		data(){
			return{
				id: 0,
				data: {},
				address: '',
				applyCarList: [],
				user: [1,2],
				statusType: {0: 'warning', 1: 'success', 2: 'error'},
				taskStatus: {0: 'warning', 1: 'success', 2: 'error'}
			}
		},
		computed: {
			roles(){ // 用户角色
				return storage.get('vuex_roles');
			},
		},
		onLoad(options) {
			if(options.id){
				this.id = options.id;
				this.getData();
			}
		},
		methods: {
			/**
			 * 获取行程详情
			 */
			getData(){
				this.$modal.loading("请求中");
				getInfo(this.id).then(res => {
					this.$modal.closeLoading();
					
					let address = [res.data.startLocation];
					address = address.concat(res.data.transitPlace);
					address.push(res.data.endLocation);
					
					this.address = address.join(' - ');
					if(res.data.applyCarList){
						this.applyCarList = res.data.applyCarList.map(item => {
							item.address = [item.startLocation];
							item.address = item.address.concat(item.transitPlace);
							item.address.push(item.endLocation);
							
							return item;
						});
					}
					
					this.data = res.data;
					
					console.log('获取行程成功' , res , this.applyCarList);
				}).catch(err => {
					console.log('获取行程失败' , err);
				});
			},
			/**
			 * 拨打电话
			 * @param {Object} phone
			 */
			makePhoneCall(phone){
				makePhoneCall(phone);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.flexCenter {
		display: flex;
		align-items: center;
	}
	
	.flexCenterBetween {
		@extend .flexCenter;
		justify-content: space-between;
	}
	
	.info{
		background-color: #FFFFFF;
		
		.info-line{
			@extend .flexCenterBetween;
			border-bottom: 1px solid #E2E2E2;
			line-height: 60upx;
			
			&:last-child{
				border: none;
			}
		}
	}
	
	.users{
		background-color: #FFFFFF;
		
		.title{
			border-bottom: 1px solid #E2E2E2;
		}
		
		.con{
			.user{
				background-color: #EFEFEF;
				border-radius: 10upx;
				padding: 10upx 30upx;
				
				.user-line{
					@extend .flexCenterBetween;
					border-bottom: 1px solid #E2E2E2;
					line-height: 50upx;
					
					.user-line-text{
						@extend .flexCenter;
						
						.desc{
							flex-shrink:0;
							min-width: 120upx;
						}
					}
					
					&:last-child{
						border: none;
					}
				}
				
				&:last-child{
					margin-bottom: 0px;
				}
			}
		}
	}
	
	.addBtn {
		width: 500upx;
		margin: 100upx auto;
	}
</style>